<template>
    <div class="row">
        <div class="col-sm-12">
            <left-title :title="top.title" :desc="top.desc"></left-title>
            <div class="link-box">
                <link-title :title="recommend.title"></link-title>
                <div class="blog-recommend">
                    <a v-for="item in recommend.items"
                       :key="item.id"
                       :href="item.url"
                       :target="item.target"
                       :title="item.name">
                        {{ item.name }}
                    </a>
                </div>
                <link-title :title="blog.title"></link-title>
                <div class="blog-site">
                    <a v-for="item in blog.items"
                       :key="item.id"
                       :href="item.url"
                       :target="item.target"
                       :title="item.name">
                        {{ item.name }}
                    </a>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import LeftTitle from './common/LeftTitle'
    import LinkTitle from './common/LinkTitle'

    export default {
        components: {
            LeftTitle,
            LinkTitle
        },
        data() {
            return {
                top: {
                    title: "友情链接",
                    desc: "可能，你觉得自己没有足够得优秀，但我始终相信你仍然在努力坚持着!"
                },
                blog: {
                    title: "",
                    items: []
                },

                recommend: {
                    title: "",
                    items: []
                }
            }
        },
        name: "Link",
        methods: {
            find(type_id, key) {
                this.axios.get("/vue/nav/index", {
                    params: {type_id: type_id}
                }).then((response) => {
                    if (response.data.code === 0) {
                        this[key].title = response.data.data.name;
                        this[key].items = response.data.data.nav_info;
                    }
                })
            },
        },
        created() {
            this.find(2, "recommend");
            this.find(3, "blog");
        }
    }
</script>

<style lang="scss" scoped>
    @mixin over-flow {
        box-sizing: content-box;
        padding: 20px;
        overflow: hidden;
    }

    .link-box {
        padding: 10px 0;
        overflow: hidden;
        box-sizing: content-box;
        background: rgba(255, 255, 255, 0.8);
    }

    .blog-recommend {
        @include over-flow;
        a:nth-child(n) {
            background: #FE5187;
        }
        a:nth-child(2n) {
            background: #339967
        }
        a:nth-child(3n) {
            background: #FF8151
        }
        a:nth-child(4n) {
            background: #3594cb
        }
        a:nth-child(5n) {
            background: #66CC9A
        }
        a:nth-child(6n) {
            background: #079798
        }
        a {
            box-sizing: content-box;
            display: block;
            float: left !important;
            width: 24%;
            text-align: center;
            line-height: 30px;
            height: 30px;
            background: #075498;
            padding: 5px 0;
            overflow: hidden;
            border: 1px solid #fff;
            color: #fff;
            &:hover {
                background: #055f5f
            }
        }
    }

    .blog-site {
        @include over-flow;
        a {
            float: left;
            width: 200px;
            text-align: center;
            line-height: 30px;
            background: #f3f3f3;
            padding: 5px 0;
            overflow: hidden;
            border: 1px solid #fff;
            position: relative;
            &:before, &:after {
                content: '';
                position: absolute;
                top: 0;
                right: 0;
                height: 2px;
                width: 0;
                background: #333;
                transition: 400ms ease all;
            }
            &:after {
                right: inherit;
                top: inherit;
                left: 0;
                bottom: 0;
            }
            &:hover:before, &:hover:after {
                width: 100%;
                transition: 800ms ease all;
            }
        }

    }
</style>